<template>
  <!-- <div class="hostBody" :class="!isFullFlag ? 'hostBodyHalf' : ''" id="screenDemo"> -->
  <div class="hostBody" id="screenDemo">
    <div class="leftImg"></div>
    <div style="width: 97%; height: 100%">
      <!-- 第一行 -->
      <headerPage ref="headerPage" @changeDate="changeDate" @changeDataType="changeDataType"
        @changeFullFlag="changeFullFlag">
      </headerPage>
      <!-- 第二行 -->
      <div class="sencondRow">
        <!-- 第一列 -->
        <div style="width: 33%; ">

          <div class="co1line1">
            <yb ref="yb" :fieldTypeObj="fieldTypeObj"></yb>
          </div>
          <div class="co1line2">
            <pageTitle titleName="报账"></pageTitle>
            <div class="bzContainer" @mouseenter="co1line2Pause" @mouseleave="co1line2Scroll">
              <div class="scrollWrapper" :style="{ '--animationTime': bzObj.animationTime }">
                <div class="scrollContent" ref="scrollContent" :class="bzObj.list.length > 6 ? 'scrollContral' : ''">
                  <!-- 动态生成内容，每行两个项目 -->
                  <div v-for="(item, index) in bzObj.list" :key="index" class="item-row">
                    <div class="itemIcon"></div>
                    <div class="valueCol">
                      <span class="jtpmText">{{ item?.[fieldTypeObj.value] || 0 }}</span>
                      <!-- <span> 个</span> -->
                      <div>{{ item.indexName }}</div>
                    </div>
                    <div class="itemBg"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="co1line3">
            <sw ref="sw" :fieldTypeObj="fieldTypeObj"></sw>
          </div>
        </div>
        <!-- 第二列 -->
        <div style="width: 33%; ">
          <div class="co2line1">

            <pageTitle :imgMargin="false" titleName="重点风险指标"></pageTitle>
            <div class="horizontalContainer">
              <swiper :options="swiperOptions" ref="swiperOptions" style="display: flex; "
                v-if='computedzdfxzb.length > 0'>
                <swiper-slide v-for='(item, index) in computedzdfxzb' :key="index">
                  <div class="zbItemContainer">
                    <!-- <div class="zqItemTitle">{{ item.title }}</div> -->
                    <div class="spaceBetweenContainer" v-for="(col, ind) of item">
                      <div class="zbCommonText" :title="col.indexName">{{ col.indexName }}</div>
                      <div style="display:flex;align-items:baseline">
                        <!-- <div style="text-align: end;"> -->
                        <span class="zbNumberText" :title="col?.[fieldTypeObj.value]">{{ col?.[fieldTypeObj.value]
                          }}</span>
                        <span class="zbUnitText">{{ col?.[fieldTypeObj.key] }}</span>
                      </div>
                    </div>
                    <!-- <div class="spaceBetweenContainer">
                      <div class="zbCommonText">财务数据</div>
                      <div style="display:flex;align-items:baseline">
                        <span class="zbNumberText" :title="item.ycsj">{{ item.ycsj }}</span>
                        <span class="zbUnitText">亿</span>
                      </div>
                    </div>
                    <div class="spaceBetweenContainer">
                      <div class="zbCommonText">差异率</div>
                      <div style="display:flex;align-items:baseline">
                        <span class="zbNumberText" :title="item.cyl">{{ item.cyl }}</span>
                        <span class="zbUnitText">亿</span>
                      </div>
                    </div> -->
                    <!-- <div class="spaceBetweenContainer"  >
                      <div class="zbCommonText">环比率</div>
                      <div class="flexCenter">
                        <img v-if="item.hbl < 0" src="@/views/riskBigScreen/bigScreen/下降.png" alt="Image"
                          class="srHblStyle">
                        <img v-else src="@/views/riskBigScreen/bigScreen/上升.png" alt="Image" class="srHblStyle">
                        <span   :style="{ color: item.hbl < 0 ? '#26D454' : '#FF0000' }"
                          :title="item.hbl">{{ item.hbl }}</span><span
                          :style="{ color: item.hbl < 0 ? '#26D454' : '#FF0000' }">%</span>
                      </div>
                    </div> -->
                  </div>
                </swiper-slide>
              </swiper>
              <div class="swiper-button-prev swiper-button-prevsp" slot="button-prev"></div>
              <div class="swiper-button-next swiper-button-nextsp" slot="button-next"></div>
            </div>
            <img class="guoduImg" src="@/views/riskBigScreen/bigScreen/guoduBG.png" alt="">
          </div>

          <div class="co2line2" v-if="showMap">
            <pageTitle :imgMargin="false" style="cursor:pointer" :mapMainTitle="firstName" :titleName="secondName"
              @mainTitleClick="mainTitleClick">
            </pageTitle>
            <echartsMap ref="echartsMap" class="mapPage" :mapListObj='mapListObj' @selectRegion='selectRegion'
              @userInfo='getUserInfo' :fieldTypeObj="fieldTypeObj">
            </echartsMap>
          </div>
          <div class="co2line3" v-if="false">
            <div class="zhpjTitleContainer">
              <img src="@/views/riskBigScreen/bigScreen/zhpjLogo.png" alt="Image"
                style="vertical-align: middle; width: 1.25vw; height: 2.2vh;">
              <div class="titleName">综合评价</div>
            </div>
            <div class="zhpjContent">
              截止3月底，全省收入完成率X%，成本进度X%，净利润完成率X%
            </div>
          </div>
        </div>
        <!-- 第三列 -->
        <div style="width: 33%; ">
          <div class="co3line1">
            <pageTitle titleName="资金"></pageTitle>

            <div class="tableBox">
              <div class="tableHeader">
                <div class="tableHeaderTitle" v-for="(item, index) in zjTableObj.columns" :key="index">
                  {{ item.title }}
                </div>
              </div>
              <div class="scrollWrapper" :style="{ '--animationTime': zjTableObj.animationTime }"
                @mouseenter="scrollTablePause()" @mouseleave="scrollTableScroll()">
                <div class="tableBody scrollContent" :class="zjTableObj.data.length > 5 ? 'scrollContral' : ''"
                  ref="tbScrollRef">
                  <div class="tableRow" v-for="(item, index) in zjTableObj.data">
                    <div class="tableCell">{{ item.indexName }}</div>
                    <div class="tableCell" :title="item?.[fieldTypeObj.value]">{{ item?.[fieldTypeObj.value] }}</div>
                    <div class="tableCell">{{ item.bz }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="co3line2">
            <pageTitle titleName="业财融合"></pageTitle>
            <div class="bjTitle" @click="aaa = !aaa, updateOvalX(aaa)">业财融合</div>
            <div class="ycrhContainer">
              <div class="ycrhItem" v-for="(item, index) in visibleExpensesList" :key="index" :class="{
                [`dot${index}`]: true, dot: true, ' cursor-pointer absolute': true, stop: isStop,
              }" :style="{ '--oval-x-r': ycrhBigWidth ? '12vw' : '10.5vw' }" @mouseenter="updateIsStop(index)"
                @mouseleave="updateIsStop(-1)">
                <div class="itemTitle" :title="item.indexName">{{ item.indexName }}</div>
                <div class="itemRow">
                  <span class="zqItemNumber" :title="item?.[fieldTypeObj.value]">{{ item?.[fieldTypeObj.value] }}</span>
                  <span class="zqItemUnit"> {{ item?.[fieldTypeObj.key] }}</span>
                </div>
                <div class="iconClass"></div>
              </div>
            </div>
          </div>
          <div class="co3line3">
            <pageTitle titleName="财务"></pageTitle>
            <div class="cwContainer" @mouseenter="co3line3Pause" @mouseleave="co3line3Scroll">
              <div class="scrollWrapper" :style="{ '--animationTime': cwObj.animationTime }">
                <div class="scrollContent" ref="cwScrollContent" :class="cwObj.list.length > 4 ? 'scrollContral' : ''">
                  <!-- 动态生成内容，每行两个项目 -->
                  <div v-for="(item, index) in cwObj.list" :key="index" class="item-row">
                    <div class="valueCol">
                      <span :title='item?.[fieldTypeObj.value]' class="jtpmText">{{ item?.[fieldTypeObj.value] || 0
                        }}</span>
                      <span> {{ item?.[fieldTypeObj.key] }}</span>
                      <div :title="item.indexName">{{ item.indexName }}</div>
                    </div>
                    <div class="itemBg"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomImg"></div>
    </div>
    <div class="rightImg"></div>
  </div>
  <!-- </el-scrollbar> -->
</template>
<script>
import echartsMap from './components/map.vue'
import zjAreaName from './components/mapSource/zjAreaName.js'
import { swiper, swiperSlide } from "vue-swiper4";
import "swiper/dist/css/swiper.css";
import headerPage from "./components/pageSection/headerPage.vue"
import pageTitle from "./components/pageSection/pageTitle.vue"
import yb from "./components/pageSection/yb.vue"
import sw from "./components/pageSection/sw.vue"
import { screenList } from './components/pageSection/api.js'
export default {
  data() {
    return {
      aaa: true,
      searchForm: {
        period: '',
        dwbm: '',
      },
      fieldTypeObj: {
        key: 'smIndexUnit',
        value: 'smIndexValue',
        //indexUnit、indexValue
      },
      isFullFlag: false,
      leftOpen: false,
      mapListObj: {},
      showMap: true,
      firstName: '',
      secondName: '',

      isStop: false,
      currentIndex: 0, // 当前显示的起始元素索引
      timer: null, // 定时器引用
      bzObj: {
        animationTime: '10s',
        list: []
      },
      cwObj: {
        animationTime: '10s',
        list: []
      },
      swiperOptions: {
        slidesPerView: 2,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      },

      zdfxzb: [],
      zjTableObj: {
        animationTime: '10s',
        columns: [
          { field: 'indexName', title: '风险模型' },
          { field: 'indexValue', title: '数量', },
          { field: 'bz', title: '主要城市', },
        ],
        data: [],
      },
      ycrhList: [],
    };
  },
  watch: {},

  components: {
    echartsMap, swiper, swiperSlide, headerPage, pageTitle, yb, sw
  },
  mounted() {
    // this.screenSize(document.querySelector('#pchome'));

    this.$bus.on('toggleSideBar', (val) => {
      this.leftOpen = val
      this.query()
    })
  },

  computed: {
    ycrhBigWidth() {
      return this.leftOpen || this.isFullFlag
    },
    visibleExpensesList() {
      // 如果数组为空，直接返回空数组
      if (!this.ycrhList || this.ycrhList.length === 0) {
        return [];
      }
      // 如果数组长度小于等于6，则重复数组以填满6个元1素
      if (this.ycrhList.length <= 6) {
        const repeatedList = [];
        const neededItems = 6;
        for (let i = 0; i < neededItems; i++) {
          repeatedList.push(this.ycrhList[i % this.ycrhList.length]);
        }
        return repeatedList;
      }
      // 如果数组长度大于6，则按当前索引返回6个连续元素
      const start = this.currentIndex % this.ycrhList.length;
      const end = start + 6;
      // 处理循环情况（当start+6超过数组长度时）
      if (end > this.ycrhList.length) {
        return [...this.ycrhList.slice(start), ...this.ycrhList.slice(0, end - this.ycrhList.length)];
      }
      return this.ycrhList.slice(start, end);
    },
    computedzdfxzb() {
      // 当zdfxzb为空时，返回一个包含三个默认对象的数组
      // if (this.zdfxzb.length === 0) {
      //   return [
      //     { title: '默认标题1', ywsj: 0, ycsj: 0, cyl: 0, hbl: 0 },
      //     { title: '默认标题2', ywsj: 0, ycsj: 0, cyl: 0, hbl: 0 },
      //     { title: '默认标题3', ywsj: 0, ycsj: 0, cyl: 0, hbl: 0 }
      //   ];
      // }
      // return this.zdfxzb;
      return this.groupArray(this.zdfxzb)
    }
  },
  methods: {

    reset() {
      this.bzObj.list = []
      this.zdfxzb = []
      this.mapListObj = {}
      this.zjTableObj.data = []
      this.ycrhList = []
      this.cwObj.list = []
    },

    query(noFrash = false) {
      this.reset()
      screenList(this.searchForm).then((res) => {
        console.log('res.dataMap', res.dataMap)
        const { yb = [], bz = [], sw = [], zdfxzb = [], zj = [], ycrh = [], cw = [], dt = [] } = res.dataMap
        this.$refs.yb?.initData(yb)
        this.bzObj.list = bz
        this.bzObj.animationTime = bz.length / 2 + 's'
        this.$refs.sw?.initData(sw)

        this.zdfxzb = zdfxzb
        this.mapListObj = dt

        this.zjTableObj.data = zj
        this.ycrhList = ycrh
        this.cwObj.list = cw
        this.cwObj.animationTime = cw.length / 2 + 's'
        if (!noFrash) {
          this.$refs.echartsMap?.clearMarkers();
        }

        this.getTimmer()
      })
    },
    changeFullFlag(val) {
      this.isFullFlag = val
      this.query()
    },

    changeDataType(val) {
      switch (val) {
        case 'smsj':
          this.fieldTypeObj = {
            key: 'smIndexUnit',
            value: 'smIndexValue',
          }
          break
        case 'pdsj':
          this.fieldTypeObj = {
            key: 'indexUnit',
            value: 'indexValue',
          }
          break
      }
    },
    changeDate(val) {
      this.searchForm.period = val
      //this.firstName = ''
      this.secondName = ''
      this.query()
      // this.$refs.echartsMap?.clearMarkers();
      // this.$refs.echartsMap?.initUserDetail()
    },

    getTimmer() {
      this.timer = setInterval(() => {
        if (this.ycrhList.length > 6) {
          this.currentIndex = (this.currentIndex + 1) % this.ycrhList.length;
        }
      }, 36000);
    },

    updateIsStop(index) {
      this.isStop = !this.isStop
    },
    getUserInfo(val) {
      if (val.cityName == '省本部') {
        this.firstName = '浙江省'
      } else {
        this.firstName = val.cityName
      }
      // this.secondName = zjAreaName.get(val.cityId)?.[0]?.name || ''
      // if (!this.secondName) {
      //   this.showMap = false
      // }
    },
    mainTitleClick() {
      // this.$refs.echartsMap?.clearMarkers();
      // this.selectCityId = ''
      this.searchForm.dwbm = ''
      this.secondName = ''
      this.query()
    },
    selectRegion(val) {
      this.secondName = val.regionName
      if (this.searchForm.dwbm != val.cityId) {
        this.searchForm.dwbm = val.cityId
        this.query(true)
      }
    },

    // 向右翻页
    nextSlide() {
      this.$refs.swiperOptions.$swiper.slideNext();
    },
    // 向左翻页
    prevSlide() {
      this.$refs.swiperOptions.$swiper.slidePrev();
    },
    co1line2Pause() {
      const scrollContent = this.$refs.scrollContent;
      scrollContent.style.animationPlayState = 'paused'; // 暂停动画
    },
    co1line2Scroll() {
      const scrollContent = this.$refs.scrollContent;
      scrollContent.style.animationPlayState = 'running'; // 继续动画
    },
    co3line3Pause() {
      const scrollContent = this.$refs.cwScrollContent;
      scrollContent.style.animationPlayState = 'paused'; // 暂停动画
    },
    co3line3Scroll() {
      const scrollContent = this.$refs.cwScrollContent;
      scrollContent.style.animationPlayState = 'running'; // 继续动画
    },
    scrollTablePause() {
      const scrollContent = this.$refs.tbScrollRef
      scrollContent.style.animationPlayState = 'paused'; // 暂停动画
    },
    scrollTableScroll() {
      const scrollContent = this.$refs.tbScrollRef
      scrollContent.style.animationPlayState = 'running'; // 继续动画
    },

    groupArray(arr, size = 3) {
      const result = [];
      for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
      }
      return result;
    },
    screenSize(editorDom) {
      // return 
      // let screenWidth = document.documentElement.clientWidth;
      // let screenHeight = document.documentElement.clientHeight;
      let screenWidth = document.querySelector('.viewContain').clientWidth;
      let screenHeight = document.querySelector('.viewContain').clientHeight;
      let defWidth = editorDom.clientWidth;
      let defHeight = editorDom.clientHeight;
      // let defWidth = 1920;
      // let defHeight = 1080;
      // let xScale = (screenWidth + 17) / defWidth;
      // let yScale = (screenHeight + 17) / defHeight;
      let xScale = screenWidth / defWidth;
      let yScale = screenHeight / defHeight;
      editorDom.style.cssText += ";transform: scale(" + xScale + "," + yScale + ")";
      //恢复地图
      return
      let containerDom = document.getElementById("viewContain");
      containerDom.style.cssText += `;transform:scale(${1 / xScale},${1 / yScale})`;
      window.onresize = () => {
        let screenWidth = document.documentElement.clientWidth;
        let screenHeight = document.documentElement.clientHeight;
        xScale = screenWidth / defWidth;
        yScale = screenHeight / defHeight;
        editorDom.style.cssText +=
          ";transform: scale(" + xScale + "," + yScale + ")";
        let containerDom = document.getElementById("viewContain");
        containerDom.style.cssText += `;transform:scale(${1 / xScale},${1 / yScale
          })`;
      };
    },
  },

  beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.timer);
  },
};

</script>


<style lang="less" scoped>
.page-container {
  height: 100%;
}

@import url('./components/pageSection/rotation.less');
@import url('./components/pageSection/main.less');
</style>
